// 常用动画

// 常规旋转loading
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.ani-rotate {
    border-radius: 100%;
    margin: 2px;
    border: 2px solid var(--primary-light);
    border-bottom-color: transparent;
    height: 2.6rem;
    width: 2.6rem;
    background-color: transparent;
    display: inline-block;
    -webkit-animation: rotate 0.75s 0s linear infinite;
    animation: rotate 0.75s 0s linear infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

// 底部浮动条左右移动效果
@-webkit-keyframes translateX {
    0% {
        left: 5%;
        -webkit-transform: translate(0%);
        transform:translate(0%);
    }

    100% {
        left: 95%;
        -webkit-transform: translate(-100%);
        transform:translate(-100%);
    }
}

@keyframes translateX {
    0% {
        left: 5%;
        -webkit-transform: translate(0%);
        transform:translate(0%);
    }

    100% {
        left: 95%;
        -webkit-transform: translate(-100%);
        transform:translate(-100%);
    }
}

.ani-transx{
    position: relative;
}

.ani-transx:after{
    content: " ";
    position: absolute;
    display: block;
    width: 20%;
    height: 4px;
    border-radius: 2px;
    background-color: #fff;
    bottom: 3px;
    left: 50%;
    transform:translate(-50%);
    -webkit-animation: translateX 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
    animation: translateX 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}

// 透明度循环渐变效果
@-webkit-keyframes fadeOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: .8;
    }
}

@keyframes fadeOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: .8;
    }
}

.ani-fade-opacity {
    outline: 1px solid #ccc;
    -webkit-animation: fadeOpacity 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
    animation: fadeOpacity .5s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}


// 淡入淡出

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.ani-fade {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}


@-webkit-keyframes fadeInR {
    0% {
        opacity: 0;
        transform: translateX(10000px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInR {
    0% {
        opacity: 0;
        transform: translateX(10000px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.ani-fade-in-r {
    -webkit-animation-name: fadeInR;
    animation-name: fadeInR;
}


@-webkit-keyframes fadeInB {
    0% {
        opacity: 0;
        transform: translateY(6000px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInB {
    0% {
        opacity: 0;
        transform: translateY(6000px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ani-fade-in-b {
    -webkit-animation-name: fadeInB;
    animation-name: fadeInB;
}

@-webkit-keyframes shake-7 {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90% {
        -webkit-transform: translateX(7%);
        transform: translateX(7%);
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        -webkit-transform: translateX(-7%);
        transform: translateX(-7%);
    }
}

@keyframes shake-7 {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90% {
        -webkit-transform: translateX(7%);
        transform: translateX(7%);
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        -webkit-transform: translateX(-7%);
        transform: translateX(-7%);
    }
}

.ani-fade,
.ani-fade-in-r,
.ani-fade-in-b{
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}

.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.slow {
    -webkit-animation-duration: 750ms !important;
    animation-duration: 750ms !important;
}

.fast {
    -webkit-animation-duration: 250ms !important;
    animation-duration: 250ms !important;
}

.linear {
    -webkit-animation-timing-function: linear !important;
    animation-timing-function: linear !important;
}

.ease {
    -webkit-animation-timing-function: ease !important;
    animation-timing-function: ease !important;
}

.ease-in {
    -webkit-animation-timing-function: ease-in !important;
    animation-timing-function: ease-in !important;
}

.ease-out {
    -webkit-animation-timing-function: ease-out !important;
    animation-timing-function: ease-out !important;
}

.ease-in-out {
    -webkit-animation-timing-function: ease-in-out !important;
    animation-timing-function: ease-in-out !important;
}

.bounce-in {
    -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
    animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
}

.bounce-out {
    -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
    animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
}

.bounce-in-out {
    -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
    animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
}

.short-delay {
    -webkit-animation-delay: 300ms !important;
    animation-delay: 300ms !important;
}

.long-delay {
    -webkit-animation-delay: 700ms !important;
    animation-delay: 700ms !important;
}